<template>
  <gui-popup
    ref="SendShowPopup"
    :customClass="['popup-container']"
    title="发货选择"
    isCloseBtn
    titleStyle="background-color:#4a9bfa;line-height:100rpx;font-size:36rpx;color:white;border-top-left-radius:16rpx;border-top-right-radius:16rpx;font-weight:500;"
  >
    <view class="gui-radio-lable">
      <view class="popup-content">
        <view class="send-container" style="border: none">
          <view class="send-label">发货：</view>
          <gui-stags :tags="sendOption" @change="changeSendOption" />
        </view>

        <view class="send-container" v-if="sendInfo.delivery_method === 1">
          <input
            v-model="sendInfo.logistics_compan"
            type="text"
            placeholder="请输入物流公司"
          />
        </view>

        <view class="send-container" v-if="sendInfo.delivery_method === 1">
          <input
            v-model="sendInfo.logistics_no"
            type="text"
            placeholder="请输入物流单号"
          />
        </view>

        <button type="default" class="send-btn" @click="sendGoods">发货</button>
      </view>
    </view>
  </gui-popup>
</template>

<script setup>
import { ref, reactive } from "vue";
const emit = defineEmits(["sendGoods"]);
const SendShowPopup = ref(null);
const sendInfo = reactive({
  id: undefined,
  delivery_method: 2,
  logistics_compan: "",
  logistics_no: "",
});
const show = (id) => {
  sendInfo.id = id;
  SendShowPopup.value.open();
};
const changeSendOption = (value) => {
  sendInfo.delivery_method = value.value;
};

const sendGoods = async () => {
  emit("sendGoods", sendInfo);
};

const close = () => {
  Object.assign(sendInfo, {
    id: undefined,
    delivery_method: 2,
    logistics_compan: "",
    logistics_no: "",
  });
  SendShowPopup.value.close();
};
const sendOption = ref([
  {
    text: "自行配送",
    value: 2,
    checked: true,
  },
  {
    text: "快递邮寄",
    value: 1,
    checked: false,
  },
]);

defineExpose({
  show,
  close,
});
</script>

<style scoped lang="scss">
/* 新增弹窗样式 */
.popup-container {
  border-radius: 16rpx;
  overflow: hidden;
}

.popup-content {
  padding: 40rpx 60rpx;
  background-color: #ffffff;
  color: #333333;
}

.send-container {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 30rpx;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 20rpx;
}

.send-label {
  font-size: 28rpx;
  color: #333333;
  min-width: 80rpx;
}

.send-container input {
  height: 80rpx;
  width: 100%;
  font-size: 28rpx;
  color: #333333;
}

.send-btn {
  margin-top: 40rpx;
  height: 90rpx;
  background: linear-gradient(45deg, #4a9bfa, #5e72e4);
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  width: 100%;
  box-shadow: 0 6rpx 10rpx rgba(74, 155, 250, 0.2);
}
</style>
